<template>
  <div class="nva">
    <ul>
      <li @click="clickItem(url)"
      v-for="">
        <img src="../../assets/icon/siren.png" >
        <span class="wenzi">私人FM</span>
      </li>
      <li>
        <img src="../../assets/icon/meirituijian.png">
        <span class="wenzi">每日推荐</span>
      </li>
      <li @click="song">
        <img src="../../assets/icon/gedan.png" alt="">
        <span class="wenzi">歌单</span>
      </li>
      <li @click="ranking">
        <img src="../../assets/icon/paihangbang.png" alt="">
        <span class="wenzi" >排行榜</span>
      </li>
    </ul>
  </div>
</template>

<script>
  import { Dialog } from 'vant';
    export default {
        name: "index",
      data(){
          return{
            url: '/rec'
          }
      },
      methods:{
            clickItem(url){
              this.$router.push({path : url});
            },
            ranking(){
              this.$router.push({ name: 'ranking' });
            },
            song(){
              this.$router.push({ name: 'song' });
            },

            fm(url){
              if (this.auth) {
                Dialog.alert({
                  message: '已经登陆过了',
                });
              } else {
                this.$http.get(url)
                  .then((res) => {
                    console.log(res);
                  })
                  .catch((err) => {
                    if (err.response.data.code === 301) {
                      Dialog.confirm({
                        title: '提示',
                        message: err.response.data.msg,
                      }).then(() => {
                        this.$router.push({ name: 'login' });
                      }).catch(() => {
                        // on cancel
                      });
                    }
                  });
              }
            }
          }
    }
</script>

<style scoped>
  .nva{
    width: 100vw;
    height: 110px;
    margin-top: 30px;
    border-bottom: 2px solid #F2F3F4;
  }
  .nva ul{
    width: 100vw;
    height: 110px;
  }
  .nva ul li {
    width: 25vw;
    height: 110px;
    float: left;
    list-style: none;
    margin-top: 10px;
  }
  img{
    display: inline-block;
    margin-left: 20px;
    width: 50px;
    height: 50px;
    position: relative;
    text-align: center;
  }
  .wenzi{
    width: 25vw;
    display: block;
    font-size: 12px;
    text-align: center;
    margin-top: -6px;
  }

</style>
